<template>
    <view class="container">
        <view class="header">
            <text class="title">海报组件测试</text>
        </view>
        
        <view class="buttons">
            <button type="primary" @click="testSimplePoster">测试简单海报</button>
            <button type="default" @click="showPosterDialog" style="margin-top: 20rpx;">显示海报弹窗</button>
        </view>
        
        <view class="preview" v-if="generatedImage">
            <text class="preview-title">生成的海报:</text>
            <image :src="generatedImage" mode="widthFix" class="poster-image" />
        </view>
        
        <!-- 海报组件 -->
        <lime-poster-cmpt 
            :show="showPoster" 
            :config="posterConfig" 
            @bindCloseTap="closePoster"
        />
        
        <!-- 直接使用 l-painter 测试 -->
        <l-painter 
            ref="testPainter"
            :board="testConfig"
            :hidden="true"
            :custom-style="'position: fixed; left: -9999rpx;'"
            @success="onTestSuccess"
            @fail="onTestFail"
            :use-c-o-r-s="true"
        />
    </view>
</template>

<script>
import limePosterCmpt from '@/cmpts/public/poster/lime_poster_cmpt';
const limePosterHelper = require('@/cmpts/public/poster/lime_poster_helper.js');

export default {
    components: {
        limePosterCmpt
    },
    data() {
        return {
            showPoster: false,
            posterConfig: null,
            generatedImage: '',
            testConfig: {
                css: {
                    width: '750rpx',
                    paddingBottom: '40rpx',
                    background: '#ffffff'
                },
                views: [
                    {
                        text: '这是测试文字',
                        type: 'text',
                        css: {
                            marginLeft: '40rpx',
                            marginTop: '40rpx',
                            fontSize: '36rpx',
                            color: '#333333'
                        }
                    },
                    {
                        src: '/static/images/share.jpg',
                        type: 'image',
                        css: {
                            width: '300rpx',
                            height: '200rpx',
                            marginLeft: '40rpx',
                            marginTop: '30rpx',
                            objectFit: 'cover'
                        }
                    }
                ]
            }
        }
    },
    methods: {
        async testSimplePoster() {
            console.log('开始测试简单海报生成...');
            
            try {
                // 等待组件渲染
                await new Promise(resolve => setTimeout(resolve, 1000));
                
                const options = {
                    fileType: 'jpg',
                    quality: 0.8,
                    success: (res) => {
                        console.log('测试海报生成成功:', res.tempFilePath);
                        this.generatedImage = res.tempFilePath;
                        uni.showToast({
                            title: '海报生成成功',
                            icon: 'success'
                        });
                    },
                    fail: (err) => {
                        console.error('测试海报生成失败:', err);
                        uni.showToast({
                            title: '生成失败: ' + (err.errMsg || '未知错误'),
                            icon: 'none',
                            duration: 3000
                        });
                    }
                };
                
                // H5环境下使用base64，其他环境使用url
                // #ifdef H5
                options.pathType = 'base64';
                // #endif
                // #ifndef H5
                options.pathType = 'url';
                // #endif
                
                this.$refs.testPainter.canvasToTempFilePathSync(options);
            } catch (error) {
                console.error('测试海报生成异常:', error);
                uni.showToast({
                    title: '生成异常',
                    icon: 'none'
                });
            }
        },
        
        async showPosterDialog() {
            try {
                // 生成海报配置
                this.posterConfig = await limePosterHelper.generateSimplePoster({
                    cover: '/static/images/share.jpg',
                    title: '这是一个测试标题',
                    desc: '这是测试描述内容，用来验证海报组件是否正常工作。',
                    bg: 'linear-gradient(180deg,#4CAF50 0%, #2E7D32 100%)'
                });
                
                console.log('生成的海报配置:', this.posterConfig);
                
                // 显示海报弹窗
                this.showPoster = true;
            } catch (error) {
                console.error('生成海报配置失败:', error);
                uni.showToast({
                    title: '配置生成失败',
                    icon: 'none'
                });
            }
        },
        
        closePoster() {
            this.showPoster = false;
        },
        
        onTestSuccess(tempFilePath) {
            console.log('l-painter 直接测试成功:', tempFilePath);
        },
        
        onTestFail(error) {
            console.error('l-painter 直接测试失败:', error);
        }
    }
}
</script>

<style>
.container {
    padding: 40rpx;
}

.header {
    text-align: center;
    margin-bottom: 60rpx;
}

.title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
}

.buttons {
    margin-bottom: 60rpx;
}

.buttons button {
    width: 100%;
}

.preview {
    text-align: center;
}

.preview-title {
    font-size: 32rpx;
    color: #666;
    display: block;
    margin-bottom: 30rpx;
}

.poster-image {
    width: 90%;
    border-radius: 16rpx;
    box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.1);
}
</style>
